<script setup>
import { ref, watch } from 'vue'

defineOptions({
  name: 'CarGatesDetail',
})

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
  parkList: {
    type: Array,
    default: () => [],
  },
})

const formRef = ref()

const dialogVisible = ref(false)

const currentDetail = ref({})

const handleClose = () => {
  dialogVisible.value = false
  currentDetail.value = {}
  formRef.value?.resetFields()
}

watch(
  () => props.detail,
  (val) => {
    currentDetail.value = val
  },
  {
    immediate: true,
  },
)

watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      formRef.value?.resetFields()
    }
  },
)

defineExpose({ dialogVisible })
</script>

<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="闸机详情"
    width="813px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-form
        ref="formRef"
        :model="currentDetail"
        label-position="right"
        label-width="100"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="设备昵称：" prop="nickName">
              <span>{{ currentDetail.nickName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="ip地址：" prop="ip">
              <span>{{ currentDetail.ip }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口：" prop="port">
              <span>{{ currentDetail.port }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名：" prop="userName">
              <span>{{ currentDetail.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码：" prop="password">
              <span>{{ currentDetail.password }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 100%;
  margin-bottom: 0;

  .image-item {
    width: 100px;
    height: 100px;
  }
}
</style>
